html[data-theme="light"] {
  --twoslash-border-color: #d1d5db;
  --twoslash-highlighted-border: #c37d0d50;
  --twoslash-highlighted-bg: #c37d0d20;
  --twoslash-popup-bg: #ffffff;
  --twoslash-popup-color: inherit;
  --twoslash-popup-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px;
  --twoslash-docs-color: #525252;
  --twoslash-code-font-size: 1em;
  --twoslash-matched-color: inherit;
  --twoslash-unmatched-color: #888;
  --twoslash-cursor-color: #8888;
  --twoslash-tag-color: #3772cf;
  --twoslash-tag-bg: #3772cf20;
  --twoslash-tag-warn-color: var(--twoslash-warn-color);
  --twoslash-tag-warn-bg: var(--twoslash-warn-bg);
  --twoslash-tag-annotate-color: #1ba673;
  --twoslash-tag-annotate-bg: #1ba67320;
}
html[data-theme="dark"] {
  --twoslash-border-color: #1f2937;
  --twoslash-highlighted-border: #c37d0d50;
  --twoslash-highlighted-bg: #c37d0d20;
  --twoslash-popup-bg: #0d0d0d;
  --twoslash-popup-color: inherit;
  --twoslash-popup-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px;
  --twoslash-docs-color: #a3a3a3;
  --twoslash-code-font-size: 1em;
  --twoslash-matched-color: inherit;
  --twoslash-unmatched-color: #888;
  --twoslash-cursor-color: #8888;
  --twoslash-tag-color: #3772cf;
  --twoslash-tag-bg: #3772cf20;
  --twoslash-tag-warn-color: var(--twoslash-warn-color);
  --twoslash-tag-warn-bg: var(--twoslash-warn-bg);
  --twoslash-tag-annotate-color: #1ba673;
  --twoslash-tag-annotate-bg: #1ba67320;
}

.twoslash-hover {
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s linear;
}

.twoslash-hover:hover {
  border-color: currentColor;
}

.twoslash-popup-container {
  @apply absolute z-50 inline-flex select-none flex-col overflow-auto rounded-md border border-(--twoslash-border-color) bg-(--twoslash-popup-bg) text-left text-(--twoslash-popup-color) duration-100;
  box-shadow: var(--twoslash-popup-shadow);
  transform: translate(var(--offset), calc(2rem + var(--arrow-size)));
}

.twoslash-popup-container:hover {
  @apply select-auto;
}

.twoslash-popup-arrow {
  @apply pointer-events-none absolute left-4 top-[-4px] h-[6px] w-[6px] border-r border-t border-(--twoslash-border-color);
  background: var(--twoslash-popup-bg);
  transform: rotate(-45deg);
}

.twoslash-popup-code,
.twoslash-popup-error,
.twoslash-popup-docs {
  padding: 6px 8px !important;
}

.twoslash-popup-code {
  @apply w-fit font-mono;
  font-size: var(--twoslash-code-font-size);
}
.twoslash-popup-code > * + * {
  @apply border-b-0 border-t-[0.5px];
}

.twoslash-popup-docs,
.twoslash-popup-type {
  @apply border-(--twoslash-border-color);
}
.twoslash-popup-docs {
  @apply font-sans text-[0.8em] text-(--twoslash-docs-color);
}

.twoslash-popup-error {
  @apply bg-(--twoslash-error-bg) text-[0.8em] text-(--twoslash-error-color);
}

.twoslash-popup-docs-tags {
  @apply flex flex-col;
}

.twoslash-popup-docs-tags,
.twoslash-popup-docs-tag-name {
  @apply mr-1;
}

.twoslash-popup-docs-tag-name {
  font-family: var(--twoslash-code-font);
}

.twoslash-error-line {
  @apply dark:bg-red-1000 relative my-1 w-max min-w-full border-l-4 border-solid border-red-400 bg-red-100 px-3 py-2 text-black dark:border-red-600 dark:text-white;
}

.twoslash-error-line.twoslash-error-level-warning {
  @apply bg-yellow-75 dark:bg-yellow-1000 border-yellow-400 dark:border-yellow-600;
}

.twoslash-error {
  @apply pb-[2px];
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
    repeat-x bottom left;
}

.twoslash-error.twoslash-error-level-warning {
  @apply pb-[2px];
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c37d0d'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
    repeat-x bottom left;
}

@supports selector(:has(+ *)) {
  .twoslash-popup-type:has(+ .twoslash-popup-docs) {
    @apply mb-1;
  }
}
@supports not selector(:has(+ *)) {
  .twoslash-popup-type {
    @apply mb-1;
  }
}
